<template>
  <div>
    <!-- 头部内容开始 -->
    <van-nav-bar
      title="课程详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="share" size="18" />
      </template>
    </van-nav-bar>
    <!-- 头部内容结束 -->
    <!-- title头部布局开始 -->
    <div class="title title__container">
      <div class="title_icon">
        <p style="font-size: 18px">{{ list.title }}</p>
        <van-icon
          v-if="!isShow"
          @click="lookList(list.id)"
          size="18"
          name="like-o"
        />
        <van-icon
          v-if="isShow"
          @click="deleteOne(list.id)"
          size="18"
          name="like"
        />
      </div>
      <p class="title__p" v-if="list.price == 0">免费</p>
      <p class="title__p" v-if="list.price != 0">{{ list.price }}</p>
      <p class="title_num">{{ list.browse_num }}已经报名</p>
    </div>
    <!-- title头部布局结束 -->
    <!-- 教学团队开始 -->
    <div class="title title_tims">
      <p>教学团队</p>
      <div class="title__flo" v-for="(item, index) in teachers" :key="index">
        <img style="width: 20%" :src="item.teacher_avatar" alt="" />
        <p>{{ item.teacher_name }}</p>
      </div>
    </div>
    <!-- 教学团队结束 -->

    <!-- 课程大纲开始 -->
    <div class="title">
      <h2>课程大纲</h2>
      <div class="title__class" v-for="(item, index) in classGang" :key="index">
        <div>{{ item.periods_title }}</div>
        <p>{{ item.teachers[0].teacher_name }} &nbsp; {{ item.start_play }}</p>
      </div>
    </div>
    <!-- 课程大纲结束 -->

    <!-- 课程评论开始 -->
    <van-list
    class='title'
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <h2>课程评论</h2>
    <div v-if="isShowTrue==true">
      <div v-for="(item,index) in listContainer" :key="index">
      </div>
    </div>
       <div v-if="isShowTrue==false"><van-empty description="当前没有评论哦" /></div>
    </van-list>
    <!-- <div></div> -->
    <!-- 课程评论结束 -->
  </div>
</template>

<script>
import { lglListRightXiang } from "../../util/http";
import { lglCollectList } from "../../util/http";
import { lglClassGang } from "../../util/http";
import { lglPingLun } from "../../util/http";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      list: [], //渲染的数据
      teachers: [], //渲染老师的数据
      isShow: false, //收藏 与取消收藏的判断
      classGang: [], //课程大纲
      //
      loading: false,
      finished: false,
      lists: [],
      //评论的数据
        page:0,
        id:0,
        isShowTrue:false,
        listContainer:[],//评论的数组
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.addget();
  },
  methods: {
    async addget() {
      let id = this.$route.query.id; //接受id  准备发起请求
      this.id = id
      await lglListRightXiang(id).then((res) => {
        this.list = res.info;
        this.teachers = res.teachers;
      });
      //课程
      lglClassGang({ id }).then((res) => {
        this.classGang = res;
      });
    },

    //点击按钮返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    //点击收藏小icon
    async lookList(id) {
      //如果没有登录的话 跳转到登录页面
      let user = sessionStorage.getItem("user");
      if (!user) {
        return this.$router.push("/login");
      }
      //如果处于登录状态 发起数据请求
      console.log(id);

      await lglCollectList({ id, type: 1 }).then((res) => {
        //失败收藏
        if (!res) {
          return this.$toast.fail({
            message: "收藏失败",
          });
        }
        this.isShow = true;
        this.$toast.success({
          message: "收藏成功",
        });
      });
    },
    //点击小icon取消收藏
    deleteOne(id) {
      console.log(id);
    },
    //
    onLoad() {

      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求 ?id=${data.id}&page=${data.page}&limit=10
      setTimeout(async () => {
        //进入时 page++
        this.page++
      await  lglPingLun({current_page:this.page,id:this.id,limit:10}).then(res=>{
          if(res.list.length==0){
            this.isShowTrue = false;
            this.finished = true;
             return false;
          }else{
            this.isShowTrue = true;
          }
          res.list.filter(item=>{
             this.listContainer.push(item)
          })
        })

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.page >= 2) {
          this.finished = true;
        }
      }, 1000);
    },
  },
};
</script>

<style scoped >
.title {
  margin-top: 20px;
  box-sizing: border-box;
  padding: 15px;
  width: 100vw;
  background: pink;
}
.title__container {
  height: 150px;
}
.title_icon {
  display: flex;
  justify-content: space-between;
}
.title__p {
  font-size: 18px;
  color: orangered;
  margin-top: 7px;
}
.title_num {
  font-size: 16px;
  color: #f0f0f0;
}
.title__class {
  margin-top: 20px;
}
.title__flo {
  float: left;
}
.title_tims {
  overflow: hidden;
}
</style>
